"use strict";
import * as React from 'react';
import { autoSize, commonProps, commonStyles } from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import Colors from "../../assets/styles/Colors";
import ReserveRoomItem from "../../component/ReserveRoomItem";
import Line from "../../component/Line";
import MyText from "../../component/MyText";
import T from "../../utils/T";
import { timeAreaStyles } from "../../assets/styles/timeAreaPicker";
import { SCREEN_HEIGHT, SCREEN_WIDTH, NAVBAR_HEIFHT } from "../../constant";
import { reserveStyles } from "../../assets/styles/reserve";
import constant from "../../utils/constant";
const { View, TouchableOpacity } = require('react-native');
const NavigationBar = require('react-native-navbar').default;
const { Actions } = require("react-native-router-flux");
const { connect } = require('react-redux');
const { List, DatePicker } = require('antd-mobile');
const { KeyboardAwareScrollView } = require('react-native-keyboard-aware-scroll-view');
const moment = require("moment");
const { Toast } = require('antd-mobile');
class Page extends React.Component {
    constructor() {
        super(...arguments);
        this.state = {
            meetingDesc: '',
            paid: this.props.selectDate.duration / 30,
            selectedDate: this.props.selectDate
        };
        this.onCallback = (meetingDesc) => {
            this.setState({ meetingDesc });
        };
        this.doReserve = () => {
            if (Number(this.props.auth.userInfo.paid) < this.state.paid) {
                Toast.fail('您的配额不足,无法预定', constant.ToastDuration);
                return;
            }
            let end = moment(this.state.selectedDate.start).add(this.state.selectedDate.duration, 'm');
            let payload = {
                room: { id: this.props.selectedRoom.id },
                user: { id: this.props.auth.userInfo.id },
                reserveDate: moment(this.state.selectedDate.date).format('YYYY-MM-DD'),
                start: this.state.selectedDate.start.format('HH:mm'),
                end: end.format('HH:mm'),
                paid: this.state.paid,
                ps: this.state.meetingDesc,
            };
            this.props.dispatch({
                type: 'room/reserveRoom',
                payload
            });
        };
        this.onChange = (props) => {
            this.setState({ paid: props.duration / 30, selectedDate: props });
        };
        this.getExtra = () => {
            let text = '';
            if (this.props.selectedRoom.board) {
                text += T('Whiteboard') + ',';
            }
            if (this.props.selectedRoom.phone) {
                text += T('Phone') + ',';
            }
            if (this.props.selectedRoom.tv) {
                text += T('TV') + '';
            }
            return text;
        };
        this.renderHeader = () => {
            return (<ReserveRoomItem {...this.props.selectDate} item={this.props.selectedRoom} collapsed={false} timeArea={this.props.timeArea} canPickDate={true} canBook={true} identifier={this.props.selectedRoom.id} onChange={this.onChange} haveNextStep={false}/>);
        };
    }
    componentDidMount() {
        this.props.dispatch({
            type: 'auth/freshUserInfo'
        });
    }
    render() {
        return (<View style={[commonStyles.container, commonStyles.relative]}>
                <NavigationBar {...commonProps.navBar} title={{ title: '房间号', tintColor: Colors.White }} leftButton={<NavBackButton />}/>
                <View style={{ width: SCREEN_WIDTH, height: SCREEN_HEIGHT - autoSize(50) - NAVBAR_HEIFHT - 20 }}>
                    <KeyboardAwareScrollView>
                        <List renderHeader={this.renderHeader}>

                            <Line height={10} color={Colors.Background}/>
                            
                            <List.Item>
                                <MyText color={Colors.Black} fontSize={18} fontWeight={'bold'}>预定费用</MyText>
                            </List.Item>
                            <List.Item extra={this.state.paid}>
                                <MyText color={Colors.SubTitle} fontSize={13}>需要配额</MyText>
                            </List.Item>
                            <List.Item>
                                <MyText color={Colors.Title} fontSize={13}>{`付款方:${this.props.auth.userInfo.nickName}`}</MyText>
                                <List.Item.Brief>{`(这个月还有${this.props.auth.userInfo.paid} 个包括在内的配额)`}</List.Item.Brief>
                            </List.Item>
                            <Line height={10} color={Colors.Background}/>
                            
                            <List.Item>
                                <MyText color={Colors.Black} fontSize={18} fontWeight={'bold'}>房间详情</MyText>
                            </List.Item>
                            <List.Item>
                                <MyText color={Colors.Title} fontSize={13}>{`付款方:${this.props.auth.userInfo.nickName}`}</MyText>
                                <List.Item.Brief>{`(${this.props.auth.userInfo.company.address})`}</List.Item.Brief>
                            </List.Item>
                            <List.Item extra={this.props.selectedRoom.seat}>
                                <MyText color={Colors.SubTitle} fontSize={13}>座位</MyText>
                            </List.Item>
                            <List.Item extra={this.getExtra()}>
                                <MyText color={Colors.SubTitle} fontSize={13}>包括</MyText>
                            </List.Item>
                            <List.Item arrow='horizontal' onClick={Actions.meetingDescription.bind(this, {
            callBack: this.onCallback,
            value: this.state.meetingDesc
        })}>
                                <MyText color={Colors.Title} fontSize={13}>会议说明</MyText>
                            </List.Item>

                            <View style={reserveStyles.tip}>
                                <MyText color={Colors.Title} fontSize={12}>您可以取消该预定，直至预定开始前的60分钟为止。</MyText>
                            </View>
                        </List>
                    </KeyboardAwareScrollView>
                </View>
                <TouchableOpacity style={[timeAreaStyles.actionButton, commonStyles.centerVH, commonStyles.absolute, reserveStyles.reserveBtn]} onPress={this.doReserve}>
                    <MyText color={Colors.White}>确认预定</MyText>
                </TouchableOpacity>
            </View>);
    }
}
export default connect(({ auth, room }) => ({ auth, room }))(Page);
